<template>
  <a-card
    style="width:100%"
    :tab-list="tabTitles"
    :active-tab-key="activeKey"
    @tabChange="key => onTabChange(key)"
  >
    <div v-if="activeKey === 'article'">
      <a-list item-layout="vertical" size="large" :data-source="articleData">
        <div slot="footer">
          <b>ant design vue</b> footer part
        </div>
        <a-list-item slot="renderItem" key="item.title" slot-scope="item">
          <template v-for="{ type, text } in actions" slot="actions">
            <span :key="type">
              <a-icon :type="type" style="margin-right: 8px" />
              {{ text }}
            </span>
          </template>
          <img
            slot="extra"
            width="272"
            alt="logo"
            src="https://www.jiubanqingchen.com/fileserver/2019-11-22/newsTitle/20191122184712.jpg"
          />
          <a-list-item-meta :description="item.description">
            <a slot="title" :href="item.href">{{ item.title }}</a>
            <a-avatar slot="avatar" :src="avatar" />
          </a-list-item-meta>
          {{ item.content }}
        </a-list-item>
      </a-list>
    </div>
    <div v-if="activeKey === 'app'">
      <a-list :grid="{ gutter: 24, column: 2 }" :data-source="appData">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-card hoverable>
            <img slot="cover" alt="example" :src="item.imgUrl" />
            <a-card-meta :title="item.title">
              <template slot="description">{{item.description}}</template>
            </a-card-meta>
          </a-card>
        </a-list-item>
      </a-list>
    </div>
    <div v-if="activeKey === 'project'">
      <a-list :grid="{ gutter: 20, column: 4}" :dataSource="projectData">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-card hoverable>
            <img alt="example" :src="item.imgUrl" slot="cover" />
            <template class="ant-card-actions" slot="actions">
              <a-icon type="setting" key="setting" />
              <a-icon type="edit" key="edit" />
              <a-icon type="ellipsis" key="ellipsis" />
            </template>
            <a-card-meta :title="item.title" :description="item.description">
              <a-avatar slot="avatar" :src="avatar" />
            </a-card-meta>
          </a-card>
        </a-list-item>
      </a-list>
    </div>
  </a-card>
</template>

<script>
const articleData = [];
for (let i = 1; i <= 5; i++) {
  articleData.push({
    href: "https://www.jiubanqingchen.com/",
    title: `久伴轻尘的文章 ${i}`,
    avatar:
      "https://www.jiubanqingchen.com/fileserver/2019-11-22/newsTitle/20191122184712.jpg",
    description: "久伴轻尘,future-template",
    content:
      "正在使用 jfinal 和 ant design vue 开发一个极速开发平台，他可以轻松的构建后台文件与前端代码，jfianl极速的开发体验与ant design vue 极致的视觉体验，让后端开发给人不一样的快感。"
  });
}
const actions = [
  { type: "star-o", text: "156" },
  { type: "like-o", text: "156" },
  { type: "message", text: "2" }
];
const appData = [];
for (let i = 1; i <= 4; i++) {
  appData.push({
    title: `久伴轻尘的应用 ${i}`,
    imgUrl:
      "https://www.jiubanqingchen.com/fileserver/2019-11-22/newsTitle/20191122184712.jpg",
    description: "测试应用"
  });
}
const projectData = [];

for (let i = 1; i <= 12; i++) {
  projectData.push({
    title: `久伴轻尘的项目 ${i}`,
    imgUrl:
      "https://www.jiubanqingchen.com/fileserver/2019-11-22/newsTitle/20191122184712.jpg",
    description: "僵小鱼好可爱"
  });
}

export default {
  data() {
    return {
      tabTitles: [
        {
          key: "article",
          tab: "文章 (5)"
        },
        {
          key: "app",
          tab: "应用 (4)"
        },
        {
          key: "project",
          tab: "项目 (12)"
        }
      ],
      actions,
      activeKey: "article",
      avatar: require("../../../assets/qc.jpg"),
      articleData,
      appData,
      projectData
    };
  },
  methods: {
    onTabChange(key) {
      this.activeKey = key;
    }
  }
};
</script>